<!--
 * @Author: zhang ke
 * @Date: 2025-06-24 16:01:19
 * @LastEditors: your name
 * @LastEditTime: 2025-07-01 11:52:33
 * @Description: 
 * @FilePath: \vue3-admin\src\views\product\spu\index.vue
-->
<template>
  <div>
    <Category></Category>
    
     <el-card style="margin: 10px 0" >
      <div v-show="scene == 0">
       <el-button type="primary" :disabled="useCategory.c3Id ? false : true" @click="changeSpu('add')">
        <el-icon><Plus /></el-icon>
        添加SPU
      </el-button>
      <!-- 表格 -->
       <el-table :data="tableData" border style="margin:10px 0">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="spuName" label="SPU名称" >
          </el-table-column>
          <el-table-column prop="description" label="SPU描述">
          </el-table-column>
          <el-table-column  label="操作" >
            <template #default="scope">
        <el-button size="small" type="primary" icon="Plus" @click="changeSku(scope.row)"></el-button>
        <el-button size="small"  icon="Edit" @click="changeSpu('edit',scope.row)"></el-button>
        <el-button size="small" type="info" @click="findSku(scope.row)" icon="InfoFilled"  />
        <el-popconfirm :title="`确定删除${scope.row.spuName}`" @confirm="delSpu(scope.row)" width="220px">
          <template #reference>
            <el-button  size="small" icon="Delete"  type="danger"></el-button>
          </template>
        </el-popconfirm>
        
      </template>
          </el-table-column>
       </el-table>
       <!-- 分页 -->
         <el-pagination @current-change="getDataList" @size-change="sizeChange" v-model:current-page="currentPage"
          v-model:page-size="pageSize" :page-sizes="[3, 5, 7, 10]" background
          layout="prev,pager,next,jumper,-> ,sizes,total" :total="total" />
          
          </div>
        <SpuForm ref="spu" v-show="scene == 1" @changeScene="changeScene"></SpuForm>
        <SkuForm ref="sku" v-show="scene == 2" @changeScene="changeScene"></SkuForm>
        <!-- sku列表弹框 -->
           <el-dialog v-model="dialogTableVisible" title="SKU列表" width="800">
              <el-table :data="skuArr" border>
                <el-table-column prop="skuName" label="sku名字" width="150" />
                <el-table-column prop="price" label="sku价格" width="200" />
               <el-table-column prop="weight" label="sku重量" />
               <el-table-column  label="sku图片" >
                 <template #default="scope">
                   <img :src="scope.row.skuDefaultImg" style="width:80px;height:80px">
                 </template>
               </el-table-column>

    </el-table>
           </el-dialog>
  </el-card>

  </div>
</template>

<script setup lang="ts">
import {ref,watch} from 'vue'
import Category from '@/components/Category/index.vue'
import type {Records, SpuData,SkuInfoData} from '@/api/product/spu/type'
import {reqHasSpu,reqSkuList,reqRemoveSpu} from '@/api/product/spu/index'
import useCategoryStore from '@/store/modules/category'
import SkuForm from './components/skuForm.vue'
import SpuForm from './components/spuForm.vue'
import { ElMessage } from 'element-plus'
const useCategory = useCategoryStore()
const currentPage = ref<number>(1)
const pageSize = ref<number>(3)
const total = ref<number>(10)
const tableData = ref<Records>([])
const scene = ref<number>(0)
const spu = ref()
const sku = ref()
//弹框关闭和打开
const dialogTableVisible = ref<boolean>(false)
const skuArr = ref<any>([])
watch(()=>useCategory.c3Id,()=>{
  console.log('useCategory.c3Id',useCategory.c3Id)
  if(!useCategory.c3Id) return //如果三级id不存在就不继续执行
  getDataList()
   console.log('useCategory.c3Id---',useCategory.c3Id)
})

// 获取列表数据的接口
const getDataList = async()=>{
  console.log('执行到')
   let res =  await reqHasSpu(currentPage.value,pageSize.value,useCategory.c3Id)
   if(res.code == 200){
    tableData.value = res.data.records
    total.value = res.data.total
   }
}

const sizeChange = ()=>{
  currentPage.value = 1
  getDataList()
}
//接收子组件传值
const changeScene = (obj:any)=>{
  scene.value = obj.scene
  if(obj.params == 'add'){
    currentPage.value = 1
  }
  getDataList()
}
//点击添加或者编辑spu
const changeSpu = (type:string,row:any)=>{
  scene.value = 1
  // 点击编辑
  if(type == 'edit'){
    spu.value.initHasSpuData(row)
  }else{
    spu.value.initAddSpu(useCategory.c3Id)
  }
}
//点击切换场景skuForm
const changeSku = (row:SpuData)=>{
   scene.value = 2
   sku.value.initSkuData(useCategory.c1Id,useCategory.c2Id,row)
}
//获取sku列表
const findSku = async(row:SpuData)=>{
  try{
    let res:SkuInfoData = await reqSkuList(row.id as number)
    if(res.code == 200 && Array.isArray(res.data)){
      skuArr.value = res.data
      dialogTableVisible.value = true
      
    }else{
       skuArr.value = []
      ElMessage({
        type:'warning',
        message:'暂无SPU数据'
      })
    }
  }catch(error){
    skuArr.value = []
    ElMessage({
        type:'error',
        message:'获取SPU数据失败'
      })
  }
}
//删除spu的事件
const delSpu = async(row:SpuData)=>{
  let res = await reqRemoveSpu(row.id as number)
  if(res.code == 200){
     ElMessage({
        type:'success',
        message:'删除成功'
      })
      //判断是不是最后一页的最后一条数据
      currentPage.value = tableData.value.length > 1 ? currentPage.value : currentPage.value - 1
      getDataList()
  }else{
     ElMessage({
        type:'error',
        message:'删除失败'
      })
  }

}
</script>

<style scoped>
</style>